<template>
  <div class="sop_list table-theme">
    <head-title title="公众号--咨询列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">总列表数：{{ total }}</p>
      <el-table
        :data="list"
        stripe
        border
        :tree-props="{ children: 'children' }"
        row-key="gzh_sop_id"
      >
        <el-table-column
          label="序号"
          align="center"
          width="140"
          prop="gzh_user_msg_id"
        >
        </el-table-column>
        <el-table-column
          label="用户ID"
          align="center"
          prop="user_id"
        ></el-table-column>
        <el-table-column
          label="openId"
          align="center"
          prop="open_id"
          v-if="admin_id == 1"
        ></el-table-column>
        <el-table-column
          label="微信识别号"
          align="center"
          prop="to_user_name"
          v-if="admin_id == 1"
        ></el-table-column>
        <el-table-column label="头像" align="center" width="100">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.heard_img"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          label="昵称"
          align="center"
          prop="nickname"
        ></el-table-column>
        <el-table-column
          label="电话"
          align="center"
          prop="phone"
        ></el-table-column>
        <el-table-column
          label="咨询内容"
          align="center"
          prop="content"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="type"
        ></el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
          width="220"
        ></el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="onSetSopReply(scope.row.gzh_user_msg_id)">回复</el-button>
          <el-button type="primary" size="mini" @click="onGetSopReplyList(scope.row.gzh_user_msg_id)">回复列表</el-button>
        </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="limit"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 回复弹框 -->
    <el-dialog
      title="回复"
      :visible.sync="replyDialog"
      width="500px"
      center
      :modal-append-to-body="false"
      @close="onClose"
    >
      <el-form
        :model="replyForm"
        :rules="replyFormRules"
        ref="replyForm"
        label-width="120px"
      >
        <el-form-item label="回复内容:" prop="content">
          <el-input
            v-model.trim="replyForm.content"
            placeholder="请输入提问"
            clearable
          ></el-input>
        </el-form-item>
        <div class="image-up">
            <el-form-item label="上传图片:" class="upload-box" prop="logistics_img">
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } " multipleaccept="image/*" > <img v-if="replyForm.imageUrl" :src="replyForm.imageUrl" class="avatar" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						<el-button type="danger" size="small" @click="reset">重置</el-button>
						<div class="el-upload__tip">小于1MB</div>
        </el-form-item>
        </div>
        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="submit('reply','replyForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ReplyList from "@/components/layer-dialog/reply-list.vue";
export default {
  data() {
    return {
      admin_id:localStorage.getItem('admin_id'),
      page: 1,
      total: 0,
      list: [],
      limit: 20,
      searchOption: [
        {
          value: 0,
          label: "用户ID",
        },
        {
          value: 1,
          label: "序号",
        }
      ],
      classSelect: "",
      selectContent: "",
      replyDialog:false,
      replyForm:{
        content:"",
        gzh_user_msg_id:"",
        imageUrl:"",
        image:""
      },
      replyFormRules:{
        content:[{required:true,message:"请输入回复"}]
      }
    };
  },
  components: {
    ReplyList
  },
  methods: {
    // 清除搜索内容
    refreshPage() {
      this.page = 1;
      this.selectContent = '';
      this.classSelect = 0;
      this.init(this.page);
    },
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: this.limit,
      };
      switch (this.classSelect) {
          case 0:
              data.user_id = this.selectContent;
              break;
          case 1:
              data.gzh_user_msg_id = this.selectContent;
              break;
          case 2:
              data.open_id = this.selectContent;
              break;
          case 3:
              data.to_user_name = this.selectContent;
              break;
          default:
              break;
      }
      this.$http(this.$ApiList.SopUserConsultList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init(1);
    },
    // 获取回复咨询列表
    onGetSopReplyList(gzh_user_msg_id){
      this.$layer.iframe({
        title:"回复列表",
        maxmin:true,
        area:['60%','50%'],
        content:{
          content:ReplyList,
          parent:this,
          data:{
            gzh_user_msg_id
          }
        }
      })
    },
    // 上传图片
    upload(params){
      const file = params.file,
      isJPGPNG = file.type === 'image/jpeg' || 'image/png',
      isLt1MB = file.size / 1024 <= 1024;
      if (!isJPGPNG) {
				this.$message.error('只能上传图片格式png、jpg!');
				return;
			}
			if (!isLt1MB) {
				this.$message.error('图片不能大于10M');
				return;
			}

			let image = new FormData();
			image.append('file[]', file);
      this.$http(this.$ApiList.AddImageSop, image).then(res => {
				this.replyForm.imageUrl = res.datas.image;
        this.replyForm.image = res.datas.media_id;
			});
    },
    onSetSopReply(gzh_user_msg_id){
      this.replyDialog = true;
      this.replyForm.gzh_user_msg_id = gzh_user_msg_id;
    },
    // 关闭
    onClose(){
      this.replyForm = {
        gzh_user_msg_id:"",
        content:"",
        imageUrl:"",
        image:""
      }
      this.replyDialog = false;
      this.$refs['replyForm'].resetFields();
    },
    submit(type,formName){
      if(type == 'reply'){
        this.$refs[formName].validate((valid)=>{
          if(valid){
            this.$http(this.$ApiList.AdmingzhAddAnswer,this.replyForm).then(res=>{
              this.$message.success(res.datas);
              this.onClose();
            })
          }
        })
      }
    },
    reset(){
      this.replyForm.imageUrl = "";
      this.replyForm.media_id = "";
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.hint {
  font-size: 14px;
  color: #dc3545;
  text-align: center;
}
.el-select {
  width: 100%;
}
.cell button {
  margin-bottom: 10px;
}
/* 上传物流弹窗 */
	.image-up .el-form-item__content .el-button--danger {
		margin-top: 20px;
		width: 80px;
		background-color: #37c1d6;
		border-color: #37c1d6;
	}
	.image-up .el-upload--text,
	.image-up .avatar {
		width: 200px;
		height: auto;
	}
	.image-up .avatar-uploader-icon {
		line-height: 200px;
		height: 200px;
	}
</style>